<template>
  <div class="main">
    <div class="center">
      <div class="center-bg" @click="toApplyFn"></div>
      <div class="bg-img eles">
        <div class="logos">
          <div class="logo1"></div>
          <div class="logo2"></div>
        </div>
        <div class="long">
          <div class="long-bg">
            <div class="long-div">
              <img
                class="xiaoren-img"
                src="@/assets/football/足球小人.png"
                alt
              />
              <img
                class="xiaoqiu-img"
                src="@/assets/football/足球小球.png"
                alt
              />
              <img class="long-img" src="@/assets/football/龙.png" alt />
            </div>
            <img class="daren-img" src="@/assets/football/大人.png" alt />
            <img
              @click="toApplyFn"
              class="zuqiu-img"
              src="@/assets/football/足球.png"
              alt
            />
            <img class="dianji-img" src="@/assets/football/点击.png" alt />
          </div>
        </div>
        <div class="wenzi">
          <img class="wenzi1" src="@/assets/football/文字1.png" alt />
          <!-- <img class="wenzi2" src="@/assets/football/文字2.png" alt /> -->
        </div>
        <!-- <div class="guize" @click="showRulesFn">
          <img src="@/assets/football/规则按钮.png" alt />
        </div> -->
      </div>
      <div class="rules" v-show="rulesVisible">
        <div class="rules-center">
          <div class="rules-head"></div>
          <div class="rules-content">
            <div class="rules-wenzi">
              <img src="@/assets/football/guize_wenzi.png" alt="" />
            </div>
          </div>
          <!-- <img src="@/assets/football/规则说明.png" alt /> -->
          <i class="el-icon-circle-close close-rules" @click="closeRulesFn"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      rulesVisible: false,
      localTime:new Date().Format("yyyy-MM-dd hh:mm:ss.S")
    };
  },
  mounted(){
    // this.$comment.createPoint({tableName:"football",moduleName:"足球",pageName:"advertisePage",eventName:"enter",localTime:this.localTime}).then(res=>{})
    
    // console.log(this.$comment.createPoint)
  },
  methods: {
    showRulesFn() {
      console.log("触发了");
      this.rulesVisible = true;
      this.$comment.createPoint({ tableName:"football", moduleName: "宣传页", pageName: "/vesync/advertisePage", eventName: "load", localTime: new Date().Format("yyyy-MM-dd hh:mm:ss.S") })
    },
    closeRulesFn() {
      this.rulesVisible = false;
      this.$comment.createPoint({ tableName:"football", moduleName: "宣传页", pageName: "/vesync/advertisePage", eventName: "leave", localTime: new Date().Format("yyyy-MM-dd hh:mm:ss.S") })
    },
    toApplyFn() {
      this.$message.info("一起期待卡塔尔世界杯吧！")
      this.$router.back(-1);
      // alert("一起期待卡塔尔世界杯吧！")
      // this.$router.push({
      //   name: "footballApply",
      // });
      // this.$comment.createPoint({ tableName:"football", moduleName: "宣传页", pageName: "/vesync/advertisePage", eventName: "点击去竞猜页面", localTime: new Date().Format("yyyy-MM-dd hh:mm:ss.S") })
    },
  },
};
</script>
<style  lang='stylus' scoped>
.main {
  width: 100vw;
  height: 100vh;
  // background-color:rgba(0,0,0,0.6)
  // background-image: url('/assets/football/bg_red.jpg');
  position: fixed;
  overflow: hidden;
  z-index: 999;
  left: 0;
  top: 0;

  .center {
    position: relative;
    box-shadow: 0 0 5px 1px #999;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;

    .center-bg {
      width: 100%;
      height: 100%;
      position: absolute;
      // background-color red
    }

    .bg-img {
      width: 80%;
      height: 90%;
      border-radius: 20px;
      position: relative;
      background: url('../../../assets/football/bg_red.jpg') no-repeat;
      background-size: 100% 100%;

      .logos {
        .logo1 {
          background: url('../../../assets/football/logo1.png') no-repeat;
          width: 127px;
          height: 54px;
          position: absolute;
          left: 50px;
          top: 20px;
          // background-size 50%
        }

        .logo2 {
          background: url('../../../assets/football/logo2.png') no-repeat;
          width: 60px;
          height: 60px;
          position: absolute;
          left: 190px;
          top: 20px;
          background-size: 50%;
        }
      }

      .wenzi {
        position: absolute;
        right: -50px;
        bottom: 0px;
        transform: scale(0.5);

        .wenzi1 {
          display: block;
          margin-bottom: 20px;
        }

        .wenzi1 {
          display: block;
        }
      }

      .guize {
        position: absolute;
        right: 20px;
        top: 20px;
        animation: shake-slow 30s infinite linear
      }

      @keyframes shake-slow {  2% {  transform: translate(6px, -2px) rotate(3.5deg);   }   4% {  transform: translate(5px, 8px) rotate(-0.5deg);   }   6% {  transform: translate(6px, -3px) rotate(-2.5deg);   }   8% {  transform: translate(4px, -2px) rotate(1.5deg);   }   10% {  transform: translate(-6px, 8px) rotate(-1.5deg);   }   12% {  transform: translate(-5px, 5px) rotate(1.5deg);   }   14% {  transform: translate(4px, 10px) rotate(3.5deg);   }   16% {  transform: translate(0px, 4px) rotate(1.5deg);   }   18% {  transform: translate(-1px, -6px) rotate(-0.5deg);   }   20% {  transform: translate(6px, -9px) rotate(2.5deg);   }   22% {  transform: translate(1px, -5px) rotate(-1.5deg);   }   24% {  transform: translate(-9px, 6px) rotate(-0.5deg);   }   26% {  transform: translate(8px, -2px) rotate(-1.5deg);   }   28% {  transform: translate(2px, -3px) rotate(-2.5deg);   }   30% {  transform: translate(9px, -7px) rotate(-0.5deg);   }   32% {  transform: translate(8px, -6px) rotate(-2.5deg);   }   34% {  transform: translate(-5px, 1px) rotate(3.5deg);   }   36% {  transform: translate(0px, -5px) rotate(2.5deg);   }   38% {  transform: translate(2px, 7px) rotate(-1.5deg);   }   40% {  transform: translate(6px, 3px) rotate(-1.5deg);   }   42% {  transform: translate(1px, -5px) rotate(-1.5deg);   }   44% {  transform: translate(10px, -4px) rotate(-0.5deg);   }   46% {  transform: translate(-2px, 2px) rotate(3.5deg);   }   48% {  transform: translate(3px, 4px) rotate(-0.5deg);   }   50% {  transform: translate(8px, 1px) rotate(-1.5deg);   }   52% {  transform: translate(7px, 4px) rotate(-1.5deg);   }   54% {  transform: translate(10px, 8px) rotate(-1.5deg);   }   56% {  transform: translate(-3px, 0px) rotate(-0.5deg);   }   58% {  transform: translate(0px, -1px) rotate(1.5deg);   }   60% {  transform: translate(6px, 9px) rotate(-1.5deg);   }   62% {  transform: translate(-9px, 8px) rotate(0.5deg);   }   64% {  transform: translate(-6px, 10px) rotate(0.5deg);   }   66% {  transform: translate(7px, 0px) rotate(0.5deg);   }   68% {  transform: translate(3px, 8px) rotate(-0.5deg);   }   70% {  transform: translate(-2px, -9px) rotate(1.5deg);   }   72% {  transform: translate(-6px, 2px) rotate(1.5deg);   }   74% {  transform: translate(-2px, 10px) rotate(-1.5deg);   }   76% {  transform: translate(2px, 8px) rotate(2.5deg);   }   78% {  transform: translate(6px, -2px) rotate(-0.5deg);   }   80% {  transform: translate(6px, 8px) rotate(0.5deg);   }   82% {  transform: translate(10px, 9px) rotate(3.5deg);   }   84% {  transform: translate(-3px, -1px) rotate(3.5deg);   }   86% {  transform: translate(1px, 8px) rotate(-2.5deg);   }   88% {  transform: translate(-5px, -9px) rotate(2.5deg);   }   90% {  transform: translate(2px, 8px) rotate(0.5deg);   }   92% {  transform: translate(0px, -1px) rotate(1.5deg);   }   94% {  transform: translate(-8px, -1px) rotate(0.5deg);   }   96% {  transform: translate(-3px, 8px) rotate(-1.5deg);   }   98% {  transform: translate(4px, 8px) rotate(0.5deg);   }   0%,  100% {  transform: translate(0, 0) rotate(0);   } }  .shake-slow{  animation:shake-slow 5s infinite ease-in-out; }
      

      .guize:hover, .zuqiu-img:hover {
        cursor: pointer;
      }

      .long {
        width: 640px;
        height: 80%;
        position: absolute;
        left: 50%;
        top: 40%;
        transform: translate(-50%, -50%);

        .long-bg {
          // background-color rgba(0,0,0,0.1)
          width: 640px;
          height: 640px;

          .long-div {
            width: 510px;
            height: 600px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);

            .xiaoren-img {
              width: 60px;
              position: absolute;
              left: 233px;
              top: 254px;
            }

            .xiaoqiu-img {
              width: 15px;
              position: absolute;
              left: 294px;
              top: 251px;
              opacity: 0;
              animation: shandong 3s infinite linear;
              animation-delay: 1s;
            }

            @keyframes shandong {
              50% {
                opacity: 0.8;
                transform: scale(0.8);
                translate(15px, 15px);
              }
            }

            .long-img {
              width: 100%;
              position: absolute;
              animation: longdong 5s infinite linear;
              animation-delay: 2s;
            }

            @keyframes longdong {
              50% {
                transform: translate(5px, 5px);
              }
            }
          }

          .daren-img {
            width: 370px;
            position: absolute;
            left: 80px;
            top: 320px;
            animation: fandong 3s 1 forwards linear;
            animation-delay: 2s;
          }

          @keyframes fandong {
            0% {
              transform: scale(1);
              rotate(0deg);
            }

            100% {
              transform: scale(0.9);
              rotate(3deg);
            }
          }

          .dianji-img {
            width: 30px;
            position: absolute;
            left: 450px;
            top: 680px;
            opacity: 0;
            animation: tishi 3s infinite linear;
            animation-delay: 3s;
          }

          @keyframes tishi {
            50% {
              opacity: 0.7;
              transform: translate(-10px, -10px);
            }
          }

          .zuqiu-img {
            width: 70px;
            position: absolute;
            left: 300px;
            top: 240px;
            transform: scale(0.2);
            animation: zuqiu 0.5s 1 forwards linear;
          }

          @keyframes zuqiu {
            100% {
              left: 390px;
              top: 640px;
              transform: scale(1);
            }

            80% {
              left: 400px;
              top: 540px;
              transform: scale(0.9);
            }

            60% {
              left: 410px;
              top: 440px;
              transform: scale(0.8);
            }

            40% {
              left: 400px;
              top: 340px;
              transform: scale(0.7);
            }

            35% {
              left: 390px;
              top: 320px;
              transform: scale(0.6);
            }

            20% {
              left: 380px;
              top: 300px;
              transform: scale(0.5);
            }

            15% {
              left: 370px;
              top: 280px;
              transform: scale(0.4);
            }

            10% {
              left: 360px;
              top: 260px;
              transform: scale(0.3);
            }

            0% {
              left: 300px;
              top: 240px;
              transform: scale(0.2);
            }
          }
        }
      }
    }

    .rules-btn {
      position: absolute;
      bottom: 12px;
      right: 18px;
      width: 50px;
      height: 35px;
      cursor: pointer;
      // background-color: #ccc;
      opacity: 0;
    }

    .rules {
      position: absolute;
      top: 10px;
      width: 100%;
      height: 100%;
      // background-color: rgba(0, 0, 0 0.3);
      display: flex;
      align-items: center;
      justify-content: center;

      .rules-center {
        position: relative;
        width: 450px;
        height: 80%;
        opacity 0.85
        // background-color rgba(0,0,0,0.6)
        .rules-head {
          background: url('../../../assets/football/guize_head.png');
          width: 450px;
          height: 94px;
        }

        .rules-content {
          background: url('../../../assets/football/guize_content.png') no-repeat;
          width: 450px;
          height: 927px;
          background-size: 100% 600px;
          position: relative;
        }

        .rules-wenzi {
          width: calc(100% - 5px);
          height: 500px;
          overflow-y: auto;
          position: absolute;
          top: 50px;
          text-align: center;

          &::-webkit-scrollbar {
            width: 1px;
          }

          &::-webkit-scrollbar-thumb {
            background: #3f3f3f;
            border-radius: 10px;
          }

          &::-webkit-scrollbar-track-piece {
            background: transparent;
          }
        }

        .close-rules {
          position: absolute;
          top: 0px;
          right 0px
          font-size: 40px;
          color: #ccc;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
